<template>
  <div class="login-register-container" id="background">
    <el-card class="login-register-card" shadow="hover">
      <el-tabs v-model="activeTab">
        <el-tab-pane key="user" label="用户登录" name="user">
          <el-form :model="userForm" @submit.prevent="handleUserLogin">
            <el-form-item :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input v-model="userForm.uname" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input type="password" v-model="userForm.pswd" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleUserLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane key="admin" label="管理员登录" name="admin">
          <el-form :model="adminForm" @submit.prevent="handleAdminLogin">
            <el-form-item :rules="[{ required: true, message: '请输入管理员用户名', trigger: 'blur' }]">
              <el-input v-model="adminForm.uname" placeholder="请输入管理员用户名"/>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '请输入管理员密码', trigger: 'blur' }]">
              <el-input type="password" v-model="adminForm.pswd" placeholder="请输入管理员密码"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAdminLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane key="register" label="注册" name="register">
          <el-form :model="registerForm" @submit.prevent="handleRegister">
            <el-form-item :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
              <el-input v-model="registerForm.uname" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
              <el-input type="password" v-model="registerForm.pswd" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex';
import {ref} from 'vue';
import AxiosService from '@/service/UserAPI.js'; // 引入之前定义的 axios 实例
import {useRouter} from 'vue-router';
import {ElMessage} from "element-plus";
import store from "@/store/Store.js";

export default {
  computed: {
    ...mapState(['CurrentUser']), ...mapMutations(['setCurrentUser']),
  },
  setup() {
    const router = useRouter();
    const userForm = ref({
      uname: '',
      pswd : ''
    });
    const adminForm = ref({
      uname: '',
      pswd : ''
    });
    const registerForm = ref({
      uname: '',
      pswd : ''
    });
    const activeTab = ref('user');
    const handleUserLogin = async () => {
      try {
        const response = await AxiosService.fetchUserByUname(userForm.value.uname);
        if (response === null) {
          ElMessage.error('用户不存在');
          return;
        }
        if (response.pswd !== userForm.value.pswd) {
          ElMessage.error('密码错误');
          return;
        }
        ElMessage.success('登录成功')
        store.commit('setIsAdmin', false)
        store.commit('setCurrentUser', response);
        await router.push('/User'); // 登录成功后跳转到用户页面
      } catch (error) {
        console.error(error);
      }
    };

    const handleAdminLogin = async () => {
      try {
        const response = await AxiosService.fetchUserByUname(adminForm.value.uname);
        if (response === null) {
          ElMessage.error('用户不存在');
          return;
        }
        if (response.pswd !== adminForm.value.pswd) {
          ElMessage.error('密码错误');
          return;
        }
        ElMessage.success('登录成功')
        store.commit('setIsAdmin', true)
        store.commit('setCurrentUser', response);
        await router.push('/Admin'); // 登录成功后跳转到管理员页面
      } catch (error) {
        console.error(error);
      }
    };

    const handleRegister = async () => {
      try {
        await AxiosService.addUser(registerForm.value);
        ElMessage.success('注册成功，请登录');
        activeTab.value = 'user'; // 注册成功后切换到用户登录
      } catch (error) {
        console.error(error);
      }
    };

    return {
      userForm,
      adminForm,
      registerForm,
      activeTab,
      handleUserLogin,
      handleAdminLogin,
      handleRegister
    };
  }
};
</script>

<style scoped>
#background {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/天环.JPEG');
  background-size: contain;
  z-index: -1;
}

.login-register-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让容器填满视口高度 */
  background: image('@/assets/天环.JPEG');
  background-size: cover;
}

.login-register-card {

  background-color: rgba(239, 169, 207, 0.64);
  width: 400px; /* 卡片的固定宽度 */
  padding: 20px; /* 卡片内边距 */
  border-radius: 10px; /* 卡片圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
}


/* 定义过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
